<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view style="height:100%;background:#ffffff">
            <view class="info">
                <image class="hybg" :src="data.__wxapp_img.dapp.huiyuan_bg.url"></image>
                <view class="tops">
                    <image class="avatar" :src="data.user_info.avatar_url"></image>
                    <view class="topview">
                        <view class="top1 flex-row">
                            <image class="image1 flex-y-center" :src="data.__wxapp_img.user.level.url"></image>
                            <view class="hy_member flex-y-center" style="padding:0 10upx">{{data.user_info.level_name||'普通用户'}}</view>
                        </view>
                    </view>
                    <view class="nickname">{{data.user_info.nickname}}</view>
                    <view style="margin:0 auto;text-align:center;padding-top:22upx;width:465upx">
                        <progress active="true" activeColor="#eda200" backgroundColor="#686868" :percent="data.percent" strokeWidth="3"></progress>
                    </view>
                    <view style="color:#ffffff;padding-top:10upx;font-size:10pt">已消费{{data.order_money}}元
                        <text v-if="data.next_level">，升级还需消费{{data.s_money}}元</text>
                    </view>
                    <view class="zh">
                        <view class="ye">账户余额 {{data.money}}元</view>
                        <navigator hoverClass="none" url="/pages/recharge/recharge">
                            <view class="cz">
                                去充值
                            </view>
                        </navigator>
                    </view>
                </view>
                <view class="block flex-row flex-y-center">
                    <view class="flex-grow-0 flex-y-center">
                        <image :src="data.__wxapp_img.dapp.member_rights.url"></image>
                    </view>
                    <view class="flex-grow-1">我的会员权益</view>
                </view>
                <block v-if="data.dapp.buy_member==1">
                    <view class="flex-row flex-y-center" style="background:#ffffff;margin-bottom:15upx;padding:0 37upx" v-if="data.now_level.detail">
                        <text>{{data.now_level.detail}}</text>
                    </view>
                    <view style="background:#ffffff;" :style="data._navbar&&_navbar.navs&&_navbar.navs.length>0?'margin-bottom:115upx':''" v-if="data.list!=''">
                        <view style="background:#dddddd;height:280upx;">
                            <swiper @change="changeTabs" duration="300" :nextMargin="data.my?'20px':'40upx'" :previousMargin="data.my?'30px':'65upx'" style="padding-top:48upx;height:368upx;">
                                <swiper-item :itemId="item.id" v-for="(item,index) in data.list" :key="item.id">
                                    <image :src="item.image" style="height:368upx;display:none"></image>
                                    <image :src="item.image" style="height:320upx;width:620upx;" :style="{marginTop:data.my?upx_32:''}" v-if="item.id==data.current_id||data.current_id===data.undefault&&index===0"></image>
                                    <image :class="data.current" :src="item.image" style="height:256upx;width:620upx;" :style="{marginTop:data.my?upx_64:upx_32}" v-else></image>
                                </swiper-item>
                            </swiper>
                        </view>
                        <view @tap="showDialogBtn" class="gm">￥{{data.buy_price}} 去购买</view>
                        <view @tap="hideModal" catchtouchmove="preventTouchMove" class="modal-mask" v-if="data.showModal"></view>
                        <view style="position: fixed;top: 50%;z-index: 99999;width: 100%;height:86upx">
                            <view class="modal-dialog " v-if="data.showModal">
                                <view class="modal-footer flex flex-x-center">
                                    <view @tap="pay" :class="[index>0?'btn-confirm':'btn-cancel', 'flex-grow-1']" :data-key="data.current_key" :data-payment="item.payment" :data-price="data.buy_price" v-for="(item,index) in data.pay_type_list" :key="item.id">{{item.name}}</view>
                                </view>
                            </view>
                        </view>
                        <view style="text-align:center;margin-top:30upx;color:353535;font-size:12pt">成为
                        <text v-if="data.list[data.current_key].name===data.undefault">{{data.next_level.name}}</text>
                            <text v-else>{{data.list[data.current_key].name}}</text>, 您将享受以下专属权益</view>
                        <view class="flex-row flex-y-center" style="width: 100%;padding: 0 37upx 12upx 37upx;background-color: #fff;margin-top:5upx;height:100%">
                            <text v-if="data.list[data.current_key].buy_prompt===data.undefault">{{data.next_level.buy_prompt}}</text>
                            <text class="flex-grow-1" v-else>{{data.list[data.current_key].buy_prompt}}</text>
                        </view>
                    </view>
                </block>
                <view class="flex-row" style="flex-wrap:wrap;" v-if="data.dapp.buy_member==0">
                    <block v-for="(items,idxs) in data.now_level.synopsis" :key="idxs">
                        <view class="flex-col" v-for="(item,index) in items" :key="index">
                            <view @tap="det" class="flex-col flex-x-center flex-y-center" :data-content="item.content" :data-idxs="idxs" :data-index="index" style="height:174upx;width:187upx">
                                <image :src="item.pic" style="width:64upx;height:64upx;margin-top:40upx;display:block"></image>
                                <view style="padding:20upx 0">{{item.title}}</view>
                            </view>
                            <view class="flex-x-center flex-y-center">
                                <view style="height:0px; width:0px;border-bottom:5px solid #f7f7f7;border-left:5px solid transparent;margin-top:-6upx;border-right:5px solid transparent;" v-if="index===ids&&data.cons&&idxs===idx"></view>
                            </view>
                        </view>
                        <text style="background:#f7f7f7;color:#666666;padding:40upx 24upx;width:100%" v-if="data.cons&&idxs===idx">{{data.content}}</text>
                    </block>
                </view>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	function t(t) {
    myVue.getApp.onShowData || (myVue.getApp.onShowData = {}), myVue.getApp.onShowData.scene = t;
}
	export default {
		computed: {
			upx_32() {
				return uni.upx2px(32) + 'px';
			},
			upx_64() {
				return uni.upx2px(64) + 'px';
			}
		},
		data() {
			return {
				data: {
        list: ""
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t);
        var e = this;
        e.setData({
            my: "undefined" != typeof my
        }), myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.user.member,
            method: "POST",
            success: function(t) {
                e.getApp.core.hideLoading(), 0 == t.code && (e.setData(t.data), e.setData({
                    current_key: 0
                }), t.data.list && e.setData({
                    buy_price: t.data.list[0].price
                }));
            }
        });
    },
		methods: {
			showDialogBtn: function() {
        this.setData({
            showModal: !0
        });
    },
    preventTouchMove: function() {},
    hideModal: function() {
        this.setData({
            showModal: !1
        });
    },
    onCancel: function() {
        this.hideModal();
    },
    pay: function(e) {
        var a = e.currentTarget.dataset.key, n = this.data.list[a].id, i = e.currentTarget.dataset.payment, _this = this;
        this.hideModal(), myVue.getApp.request({
            url: myVue.getApp.api.user.submit_member,
            data: {
                level_id: n,
                pay_type: i
            },
            method: "POST",
            success: function(e) {
                if (0 == e.code) {
                    if (setTimeout(function() {
                        myVue.getApp.core.hideLoading();
                    }, 1e3), "WECHAT_PAY" == i) return t("pay"), void myVue.getApp.core.requestPayment({
                        _res: e,
                        timeStamp: e.data.timeStamp,
                        nonceStr: e.data.nonceStr,
                        package: e.data.package,
                        signType: e.data.signType,
                        paySign: e.data.paySign,
                        complete: function(t) {
                            "requestPayment:fail" != t.errMsg && "requestPayment:fail cancel" != t.errMsg ? "requestPayment:ok" == t.errMsg && myVue.getApp.core.showModal({
                                title: "提示",
                                content: "充值成功",
                                showCancel: !1,
                                confirmText: "确认",
                                success: function(t) {
                                    myVue.getApp.core.navigateBack({
                                        delta: 1
                                    });
                                }
                            }) : myVue.getApp.core.showModal({
                                title: "提示",
                                content: "订单尚未支付",
                                showCancel: !1,
                                confirmText: "确认"
                            });
                        }
                    });
                    "BALANCE_PAY" == i && myVue.getApp.core.showModal({
                        title: "提示",
                        content: "充值成功",
                        showCancel: !1,
                        confirmText: "确认",
                        success: function(t) {
                            myVue.getApp.core.navigateBack({
                                delta: 1
                            });
                        }
                    });
                } else myVue.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1
                }), myVue.getApp.core.hideLoading();
            }
        });
    },
    changeTabs: function(t) {
        if ("undefined" == typeof my) e = t.detail.currentItemId; else var e = this.data.list[t.detail.current].id;
        for (var a = t.detail.current, n = parseFloat(this.data.list[0].price), i = this.data.list, o = 0; o < a; o++) n += parseFloat(i[o + 1].price);
        this.setData({
            current_id: e,
            current_key: a,
            buy_price: parseFloat(n)
        });
    },
    det: function(t) {
        var e = t.currentTarget.dataset.index, a = t.currentTarget.dataset.idxs;
        if (e != this.data.ids) {
            var n = t.currentTarget.dataset.content;
            this.setData({
                ids: e,
                cons: !0,
                idx: a,
                content: n
            });
        } else this.setData({
            ids: -1,
            cons: !1,
            idx: a
        });
    }
		},
	}
</script>

<style scoped>
.info {
    width: 100%;
}

.info-title {
    position: relative;
    width: 100%;
    height: 220upx;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.left {
    padding: 37upx 16upx 0 37upx;
    position: relative;
}

.avatar {
    width: 114upx;
    height: 114upx;
    border-radius: 114upx;
    border: 5upx solid #fff;
    margin-top: 40upx;
}

.level-name {
    height: 36upx;
    border-radius: 18upx;
    font-size: 8pt;
    color: #fff;
    background-color: #3c3642;
    padding: 0 16upx 0 0;
    margin-left: 24upx;
}

.level-name image {
    width: 44upx;
    height: 44upx;
    margin-right: 10upx;
    margin-left: -4upx;
}

.right {
    width: 100%;
    padding: 0 108upx 0 24upx;
    color: #fff;
}

.member-name {
    width: 100%;
    margin-bottom: 26upx;
}

.member-progress {
    width: 100%;
}

.member-content {
    width: 100%;
    margin-top: 20upx;
    font-size: 9pt;
}

.block {
    width: 100%;
    height: 80upx;
    padding: 0 37upx;
    background-color: #fff;
    border-bottom: 1upx solid #eee;
}

.block image {
    width: 38upx;
    height: 32upx;
    margin-right: 10upx;
}

.hybg {
    height: 42vw;
    width: 100%;
    position: absolute;
}

.tops {
    height: 408upx;
    position: relative;
    text-align: center;
}

.topview {
    display: inline;
    right: 0;
    margin-top: 70upx;
    background: #3c3642;
    border: 1px solid #3c3642;
    border-radius: 28upx;
    height: 56upx;
    position: absolute;
}

.top1 {
    height: 44upx;
    width: 100%;
    margin-top: 5upx;
    text-align: left;
}

.image1 {
    display: inline-block;
    width: 44upx;
    height: 44upx;
}

.hy_member {
    max-width: 224upx;
    color: #ffffff;
    font-size: 10pt;
    text-align: center;
    xline-height: 44upx;
}

.cz {
    display: inline-block;
    float: right;
    text-align: center;
    margin-top: 24upx;
    border-radius: 36upx;
    line-height: 50upx;
    color: #ffffff;
    border: 1upx solid #ffffff;
    width: 140upx;
    margin-right: 24upx;
}

.gm {
    margin: 128upx auto 0upx auto;
    font-size: 12pt;
    width: 520upx;
    text-align: center;
    line-height: 72upx;
    border: 2upx solid #ff4544;
    border-radius: 36upx;
    color: #ff4544;
}

.ye {
    display: inline-block;
    float: left;
    margin-left: 20upx;
    color: #ffffff;
}

.nickname {
    font-size: 11pt;
    color: #ffffff;
}

.zh {
    position: absolute;
    bottom: 0;
    background: #3b312c;
    width: 100%;
    line-height: 96upx;
}

.show-btn {
    margin-top: 100upx;
    color: #22cc22;
}

.modal-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: var(--window-top);
    left: 0;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
    z-index: 9000;
    color: #fff;
}

.modal-dialog {
    text-align: center;
    margin-top: -180upx;
}

.modal-title {
    padding-top: 50upx;
    font-size: 36upx;
    color: #030303;
    text-align: center;
}

.modal-content {
    padding: 50upx 32upx;
}

.modal-input {
    display: flex;
    background: #fff;
    border: 2upx solid #ddd;
    border-radius: 4upx;
    font-size: 28upx;
}

.input {
    width: 100%;
    height: 82upx;
    font-size: 28upx;
    line-height: 28upx;
    padding: 0 20upx;
    box-sizing: border-box;
    color: #333;
}

input-holder {
    color: #666;
    font-size: 28upx;
}

.modal-footer {
    border-radius: 36upx;
    background: #f9f9f9;
    margin: 0 40upx;
    flex-direction: row;
    height: 86upx;
    border-top: 1px solid #dedede;
    font-size: 34upx;
    line-height: 86upx;
    overflow: hidden;
}

.btn-cancel {
    color: #666;
    text-align: center;
    border-right: 1px solid #dedede;
}

.btn-confirm {
    color: #ec5300;
    text-align: center;
}

.my {
    padding-left: 65upx;
    padding-right: 40upx;
}
</style>
